<template>
  <el-container>
    <el-header>
      订单详情
    </el-header>
    <el-main>
      <div align="center">
        <p>
          订单编号:{{order.oid}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          用户账号:{{order.uid}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          下单时间:{{order.createTime}}
        </p>
        <br>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>菜品</span>
        </div>
        <div class="text item" v-for="(x,index) in menusList">
          <p>{{index+1}}:{{x.dishName}}</p>
          <p>菜品编号:<input type="text" :value="x.did" :name="'m'+index" disabled="isDisable" /></p>
          <p>售&nbsp;&nbsp;价:
            <input type="text" :value="x.mprice" disabled="isDisable"/>
          </p>
          <p>销售状态:

            <span v-if="x.mstate=='0'">
              未完成
            </span>
            <span v-if="x.mstate=='1'">
              已完成
            </span>
          </p>
          <br>
        </div>

      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>套餐</span>
        </div>
        <div class="text item" v-for="(x,index) in setMealList">
          <p>{{index+1}}:{{x.mealsName}}</p>
          <p>套餐编号:<input style="display: inline;" type="text" :value="x.msid" :name="'s'+index" disabled="isDisable" /></p>
          <p>菜品数量:<input type="text" :value="x.quantity" disabled="isDisable" /></p>
          <p>售&nbsp;&nbsp;价:<input type="text" :value="x.smPrice" disabled="isDisable"/></p>
          <p>销售状态:
            <span v-if="x.smState=='0'">
             未完成
            </span>
            <span v-if="x.smState=='1'">
              已完成
            </span>
          </p>
          <br>
        </div>

      </el-card>

      <div align="center">
        <el-button type="success" size="mini" @click="submitOrder">提交订单</el-button>
        <el-button type="success" size="mini" @click="backOrderManager">返回订单管理</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "ex",
    data() {
      return {
        oid: "",
        isDisable: true,
        order: {}, //预览订单信息
        menusList: [], //菜单数组
        setMealList: [], //套餐数组
        total: {
          mt: "", //菜品编号
          st: "" //套餐编号
        },

      }
    },
    methods: {
      showOrder() {
        var self = this;
        this.$http.get("/order/showOrder", {
          params: {
            "oid": this.oid,
          }
        }).then(function(rs) {
          self.order = rs.data.data;

          for (var i = 0; i < self.order.menusList.length; i++) {
            //添加菜单
            if (self.order.menusList[i].dishName != null) {

              self.menusList.push(self.order.menusList[i]);

            }
          }
          console.log(self.order.menusList);
          for (var i = 0; i < self.order.setMealList.length; i++) {
            //添加套餐集合
            if (self.order.setMealList[i].mealsName != null) {
              self.setMealList.push(self.order.setMealList[i]);

            }
          }
          console.log(self.order.setMealList);
        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },

      submitOrder() {
        //获取菜品编号
        this.total.mt = "";
        for (var i = 0; i < this.menusList.length; i++) {
          //属性选择器
          this.total.mt += $("input[name='m" + i + "']").val() + ",";


        }
        console.log(this.total.mt);




        //获取套餐编号
        this.total.st = "";
        for (var i = 0; i < this.setMealList.length; i++) {
          //属性选择器
          this.total.st += $("input[name='s" + i + "']").val() + ",";


        }
        console.log(this.total.st);


        var self = this;
        this.$http.get("/order/totalOrder", {
          params: {
            "oid": this.oid,
            "mt": this.total.mt,
            "st": this.total.st

          }
        }).then(function(rs) {        
           self.$alert("这个订单的总价是:" + rs.data.data);
          
        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })

      },
      backOrderManager() {
        this.$router.push("/orderManager");
      }

    },
    mounted() {

      //接收订单oid
      this.oid = this.$route.query.oid;
      console.log("oid:" + this.oid);
      // //加载试卷
      this.showOrder();

    }
  }
</script>

<style>
</style>
